<template>
  <div>
    <Toolbar :defaultConfig="toolbarConfig" :editor="editor" :mode="mode" style="border: 1px solid #ccc" />
    <Editor v-model="html" :defaultConfig="editorConfig" :mode="mode"
      style="height: 500px; overflow-y: hidden;border: 1px solid #ccc" @onCreated="onCreated" />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {
  get, del, post, imghttp
} from "@/assets/js/http.js";
export default {
  name: 'wangeditor',
  components: {
    Editor,
    Toolbar
  },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  created() {
    let that = this
    this.editorConfig.MENU_CONF['uploadImage'] = {
      // 自定义上传

      async customUpload(file, insertFn) {
        console.log(file, 123)
        // file 即选中的文件
        // 自己实现上传，并得到图片 url alt href
        // 最后插入图片
        // const {data} = await uploadFile(form)
        imghttp({
          url: "admin/ajax/upload",
          data: {
            file: file
          }
        }).then(res => {
          const url = "http://nhcj.app65.cn/" + res.file.url
          insertFn(url)
        })

      }
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  watch: {
    html: function (n, o) {
      this.$emit('update:content', n)
    },
    content: function (n, o) {
      this.html = n
      if (this.editor && this.content) {
        this.editor.setHtml(this.content)
      }
    }
  },
  data() {
    return {
      html: '',
      editor: null,
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...', MENU_CONF: {} },
      mode: 'default', // or 'simple'
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    setConent() {
      this.$emit('setConent', this.editorContent)
    },

  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style scoped></style>
